<template>
  <a-layout-sider class='admin-layout-sider-slidebar'>
    <slide-bar-item
        :menu-list="slideBarMenu"
        :menuClick="menuChange"
        :open-keys="openKeys"
        :selected-keys="selectedKeys"
        :menu-open-change="menuOpenChange"
    />
  </a-layout-sider>
</template>

<script>
import {getMenuList} from "@/api/menu/menu";
import SlideBarItem from "@/components/slideBar/SlideBarItem";
import {findFirstMenu, findFlattenParent, getParams} from "@/utils";
import _ from 'lodash';
export default {
  name: "SlideBar",
  components: {
    SlideBarItem
  },
  data() {
    return {
      slideBarMenu: [],
      openKeys: [],
      selectedKeys: []
    }
  },
  created() {
    this.getSlideBarMenu()
  },
  mounted() {
    this.getSlideBarMenu()
    // setTimeout(()=>{
    //   this.getSlideBarMenu()
    // },1000)
  },
  methods: {
    getSlideBarMenu () {
      getMenuList({
        roleId: getParams().roleId,
        state: getParams().state,
      }).then(async res => {
        const {success, data} = res;
        if(success){
          this.slideBarMenu = data;
          this.openKeys = [_.head(findFirstMenu(data)).path];
          this.selectedKeys = [_.head(findFlattenParent(data)).path];
          const {title, path, flag, fileType} = (_.head(findFlattenParent(data)));
          await this.$router.push({
            path: path,
            query: {
              ...this.$route.query,
              title,
              flag,
              fileType,
            }
          })
        }else {
          this.slideBarMenu = [];
          this.openKeys = [];
          this.selectedKeys = [];
        }
      })
    },
    menuOpenChange(openKeys) {
      this.openKeys = openKeys;
    },
    menuChange(selected) {
      const {key} = selected
      this.selectedKeys = [key];
      const findMenu = findFlattenParent(this.slideBarMenu).find(item => item.path === key);
      findMenu && this.$router.push({
        path: findMenu.path,
        query: {
          ...this.$route.query,
          title: findMenu.title,
          flag: findMenu.flag,
          fileType: findMenu.fileType,
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
